﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
}

<link href="~/Content/css/style.css?v=1.0.0" rel="stylesheet" />
<script src="~/Scripts/echarts3.min.js"></script>
<script src="~/Scripts/common.js"></script>
<style type="text/css">
    #myChart {
        width: 100%;
        height: 100%;
    }

    #DivHeader {
        padding: 10px;
    }

    #error {
        text-align: center;
        line-height: 60px;
        font-size: 20px;
    }

    #datagrid {
        width: 100%;
        height: 90%;
    }

    #datagrid .showChart {
        margin: 5px 0;
        padding: 5px 0;
    }
</style>
<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
    <table style="width: 100%;">
        <tr>
            <td style="width: 100%;">
                <a class="mini-button" iconcls="icon-search" onclick="LoadData" plain="true">刷新</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-goto" onclick="clearloca" plain="true">重置</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
            </td>
        </tr>
    </table>
</div>
<div id="DivHeader">
    <table>
        <tr>
            <td width="70px" align="right">企业名称：</td>
            <td width="190px">
                @Html.Partial("~/Views/Modular/LookupCorpInfo.cshtml")
            </td>
            <td width="70px" align="right">时间段：</td>
            <td width="482px">
                @Html.Partial("~/Views/Modular/dxDateTimeRange.cshtml")
            </td>
            <td class="style18">
                <input id="dateType" name="dateType" class="mini-combobox" style="width: 100px;" value="0" shownullitem="false"
                    required="true" allowinput="false" align="left" data="date1" />
            </td>
        </tr>
    </table>
</div>
<div id="myChart"></div>
<div id="datagrid">
    <a class="mini-button showChart" iconcls="icon-node" onclick="showChartOrTable(true)" plain="true">显示图形</a>

    <div class="mini-fit">
        <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;"idField="FName" pageSize="20" 
            multiSelect="false" fitColumns="false">
            <div property="columns">
                <div type="indexcolumn" width="40" headeralign="center">序号</div>
                <div field="FName" name="FName" width="150" headeralign="center" allowsort="true">名称</div>
                <div field="OrderNum" name="OrderNum" width="100" headeralign="center" allowsort="true">销售单数</div>
                <div field="FQty" name="FQty" width="100" headeralign="center" allowsort="true" align="right">商品数量</div>
                <div field="FAmount" name="FAmount" width="100" headeralign="center" allowsort="true" align="right" numberformat="#,0.00">应收金额</div>
                <div field="FRealAmount" name="FRealAmount" width="100" headeralign="center" allowsort="true" align="right" numberformat="#,0.00">实收金额</div>
                <div field="Profit" name="Profit" width="100" headeralign="center" allowsort="true" align="right" numberformat="#,0.00">利润</div>
            </div>
        </div>
    </div>
</div>
<div id="error"></div>
<script type="text/javascript">
    var date1 = [
        { "id": "0", "text": "按门店" },
        { "id": "1", "text": "按导购员" },
        { "id": "2", "text": "按收银员" },
        { "id": "3", "text": "按支付方式" },
        { "id": "4", "text": "按是否会员" },
        { "id": "5", "text": "按商品分类" }
    ];
    mini.parse();
    var dataResult;
    var grid = mini.get("datagrid1");

    function FormShown() {
        var nowDate = new Date();
        mini.getbyName("FDateTime1").setValue(dateToStr(nowDate, 1));
        mini.getbyName("FDateTime2").setValue(dateToStr(nowDate, 2));
    }

    function clearloca() {
        mini.getbyName("FCorpName").setValue("");
        mini.getbyName("FCorpItemID").setValue("");
        mini.getbyName("FCorpItemID").setText("");
        mini.getbyName("dateType").setValue(0);
    }

    function showChartOrTable(chart) {
        if (chart) {
            $('#myChart').slideDown(500);
            $('#datagrid').hide();
        } else {
            $('#myChart').slideUp(500);
            $('#datagrid').show();
        }
    }

    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '占比统计(营业额)',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            show: true,
            padding: [5, 80, 5, 5],
            feature: {
                myTool1: {
                    show: true,
                    title: '显示表格',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function () {
                        showChartOrTable(false);
                    }
                },
                saveAsImage: {
                    show: true,
                    title: '保存为图片'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '10%',
            containLabel: true
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '80%',
                center: ['50%', '50%'],
                hoverAnimation: false, //去掉鼠标悬浮放大效果
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

    function LoadData() {
        var param = {
            mSystemAppID: parent.window.getSystemAppID(),
            FCorpID: mini.getbyName("FCorpItemID").getValue(),
            BeginDate: mini.getbyName("FDateTime1").getText(),
            EndDate: mini.getbyName("FDateTime2").getText(),
            DataType: mini.getbyName("dateType").getValue()
        }
        postRequest('/Report/GetProporStatis', param, function (res) {
            if (res.status == 1) {
                $('#error').hide();
                $('#myChart').show();
                var name = [];
                var realAmount = [];
                var title = '';
                var dataType = mini.get('dateType').getValue();
                if (dataType == 0) {
                    title = '占比统计(营业额) - 门店';
                } else if (dataType == 1) {
                    title = '占比统计(营业额) - 导购员';
                } else if (dataType == 2) {
                    title = '占比统计(营业额) - 收银员';
                } else if (dataType == 3) {
                    title = '占比统计(营业额) - 支付方式';
                } else if (dataType == 4) {
                    title = '占比统计(营业额) - 是否会员';
                } else {
                    title = '占比统计(营业额) - 商品分类';
                }
                for (var i = 0; i < res.data.length; i++) {
                    name.push(res.data[i].FName);
                    var data = {
                        name: res.data[i].FName,
                        value: res.data[i].FRealAmount
                    }
                    realAmount.push(data);
                }
                dataResult = res.data;
                // 第一次设置
                fillData(0, grid.getPageSize(), res.data, grid);
                myChart.setOption({
                    title: { text: title },
                    legend: {
                        data: name
                    },
                    series: {
                        name: title,
                        data: realAmount
                    }
                });
            } else {
                $('#myChart').hide();
                $('#error').text(res.msg);
                $('#error').show();
            }
        });
    }

    // 分页填充细节处理
    function fillData(pageIndex, pageSize, dataResult, grid) {
        var data = dataResult, totalCount = dataResult.length;
        var arr = [];
        var start = pageIndex * pageSize, end = start + pageSize;
        for (var i = start, l = end; i < l; i++) {
            var record = data[i];
            if (!record) continue;
            arr.push(record);
        }
        grid.setTotalCount(totalCount);
        grid.setPageIndex(pageIndex);
        grid.setPageSize(pageSize);

        grid.setData(arr);
    }

    // 监听分页前事件，阻止后自行设置当前数据和分页信息
    grid.on("beforeload", function (e) {
        e.cancel = true;

        var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
        fillData(pageIndex, pageSize, dataResult, grid);
    });
    showChartOrTable(true);
    LoadData();
</script>
